<template>
  <div v-loading="loading" class="AddOrUpdate_main add_container column_one">
    <div class="main_main">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true">
        <el-form-item label="库位编码" prop="locationCode">
          <CodeRuleInput :band-value.sync="formData.locationCode" table-name="wms_location" column-name="location_code" :is-edit="id" />
        </el-form-item>
        <el-form-item label="库位名称" prop="locationName">
          <el-input v-model="formData.locationName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="所属仓库" prop="warehouseId">
          <div class="standing-add first">
            <div class="add-input">
              <el-select v-model="formData.warehouseId" filterable clearable placeholder="请选择">
                <el-option
                  v-for="item in whatWarehouse"
                  :key="item.warehouseId"
                  :label="item.warehouseName"
                  :value="item.warehouseId"
                />
              </el-select>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="库位标签" prop="ptlMac">
          <el-input v-model="formData.ptlMac" placeholder="请输入" clearable />
        </el-form-item>

        <el-form-item label="绑定货架" prop="shelfId">
          <div class="standing-add first">
            <div class="add-input">
              <el-select v-model="formData.shelfId" filterable clearable placeholder="请选择">
                <el-option
                  v-for="item in shelfOptions"
                  :key="item.id"
                  :label="item.shelfName"
                  :value="item.id"
                />
              </el-select>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="货架绑定状态" prop="ptlMac">
          <div class="show"> {{ formData.bindStatusName }}</div>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="formData.remark"
            maxlength="200"
            show-word-limit
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item v-if="isShow" label="状态">
          <el-radio-group v-model="formData.status">
            <el-radio label="1">启用</el-radio>
            <el-radio label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { addOrUpdate, getInfo, storageList } from '@/api/warehouseManagement/storageModeling'
import {
  list as getShelfOptions
} from '@/api/warehouseManagement/shelfManagement.js'
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    id: {},
    defaultValue: {}
  },
  data() {
    return {
      loading: true,
      isShow: false,
      formData: {
        id: '',
        locationCode: '',
        locationName: '',
        warehouseName: '',
        warehouseId: '',
        shelfId: '',
        shelfName: '',
        bindStatusName: '',
        ptlMac: '',
        status: '1',
        remark: ''
      },
      roleOptions: [],
      whatWarehouse: [],
      shelfOptions: [],
      rules: {
        locationCode: [
          { required: true, message: '库位编码不能为空', trigger: 'blur' }
        ],
        locationName: [
          { required: true, message: '库位名称不能为空', trigger: 'blur' }
        ],
        warehouseId: [
          { required: true, message: '所属仓库不能为空', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getStorageList()
    getShelfOptions().then(res => {
      this.shelfOptions = res.data
      console.log('this.shelfOptions', this.shelfOptions)
    })

    if (!this.id) { // 没有id就是新增
      this.loading = false
      Object.keys(this.defaultValue).forEach(key => { // 给右边数据赋值
        this.formData[key] = this.defaultValue[key]
      })
    } else { // 有id就是编辑
      this.getInfo()
    }
  },
  methods: {
    getInfo() {
      getInfo(this.id).then(res => {
        Object.keys(this.formData).forEach(key => { // 给右边数据赋值
          this.formData[key] = res.data[key]
        })
        this.isShow = true
        this.loading = false
      })
    },
    getStorageList() {
      storageList(this.formData).then(res => {
        this.whatWarehouse = res.data
        this.whatWarehouse.forEach(item => {
          item.warehouseId = item.id
        })
      })
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          addOrUpdate(this.formData).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$layer.close(this.layerid) // 关闭弹框
            this.$parent.getList()
            this.$parent.refresh() // 调用父组件的刷新方法
          })
        }
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    }
  }
}
</script>

<style lang="less" scoped>
.add-input {
  /deep/ .el-input--suffix {
    width: 280px;
  }
}
</style>
